<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body @close="cancel">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="success" plain size="mini" @click="handleAdd">新增</el-button>
          <el-button type="primary" plain size="mini" :disabled="multiple" @click="handleDelete">批量删除</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="queryList" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="店铺ID" prop="storeId" align="center"/>
        <el-table-column label="店铺别名" prop="storeAlias" align="center"/>
        <el-table-column label="skuCode" prop="skuCode" align="center"/>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="新增店铺不自动提交sku" :visible.sync="isOpen" width="600px" append-to-body
                 @close="isOpen = false">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="选择店铺：" prop="storeId">
            <!--            <el-select v-model="form.storeId" placeholder="请选择店铺" class="width35" filterable>-->
            <!--              <el-option v-for="(item,index) in storeList" :key="index"-->
            <!--                         :label="item.storeUserName + ' - '+ item.storeName" :value="item.id"></el-option>-->
            <!--            </el-select>-->
            <el-select v-model="form.storeId" placeholder="请选择店铺" class="width35" filterable>
              <el-option v-for="(item,index) in storeList" :key="index"
                         :label="item.storeUserName + ' - '+ item.storeName" :value="item.storeId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="skuCode" prop="skuCodes">
            <el-input v-model="form.skuCodes" type="textarea" :autosize="{ minRows: 2, maxRows: 10}" size="small"
                      placeholder="请输入sku编号（可输入多个，用逗号分割）"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="isOpen = false">取 消</el-button>
        </div>
      </el-dialog>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeModal">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  insertBatchSkuCode,
  unAutoSubmitSkulist,
  deleteUnAutoSubmitSkuStore
} from "@/api/order/autoSubmitSku"
import {queryAutoStoreList} from "@/api/autoOperation/autoStore";

export default {
  data() {
    return {
      loading: true,
      multiple: true,
      buttonLoading: false,//确定提交表单按钮loading
      title: "不自动提交sku列表",
      open: true,
      isOpen: false,
      form: {},
      storeList: [],//店铺列表
      storeId: "",
      rules: {
        storeId: [{required: true, message: "请选择店铺", trigger: "change"}],
        skuCodes: [{required: true, message: "skuCode不能为空", trigger: "blur"}],
      },
      queryList: [],
      ids: "",
    }
  },
  created() {
    this.getList()
    this.getStroeList()
  },
  methods: {
    // 获取数据列表
    getList() {
      unAutoSubmitSkulist().then(res => {
        this.queryList = res.rows
        this.loading = false
      })
    },
    // 获取店铺列表
    getStroeList() {
      queryAutoStoreList({userId: this.$store.getters.userId}).then(res => {
        this.storeList = res.data.list

      })
      // listSellerStoreEmpower().then(res => {
      //   this.storeList = res.rows
      // })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 新增
    handleAdd() {
      this.isOpen = true
      this.reset()
    },
    // 删除
    handleDelete(row) {
      const id = row.id || this.ids.toString();
      this.$confirm("是否确定删除此类目？", '提示').then(() => {
        deleteUnAutoSubmitSkuStore(id).then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
      })
    },
    // 确定提交
    submitForm() {
      this.$confirm('是否确定提交？', '提示').then(() => {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.form.storeUserName = this.storeList.filter(item => item.storeId == this.form.storeId)[0].storeUserName
            console.log('this.form.storeUserName', this.form.storeUserName)
            insertBatchSkuCode(this.form).then(res => {
              this.$message.success(res.msg)
            }).finally(() => {
              this.isOpen = false
              this.getList()
            })
          }
        })
      })
    },
    reset() {
      this.form = {
        storeId: undefined,
        skuCodes: undefined,
        storeUserName: undefined,
      }
      this.resetForm("form");
    },
    // 取消
    cancel() {
      this.isOpen = false
    },
    closeModal() {
      this.$emit('close', false)
    },
  }
}
</script>

<style scoped>

</style>
